<template>
	<div class="game-container report-container">
		<div class="params">
			<el-form
				ref="searchForm"
				:inline="true"
				:model="queryData"
				label-width="77px"
				size="medium"
				@submit.native.prevent
				class="flex-warp-container"
			>
				<el-select
					v-model="searchGameType"
					style="width:130px;margin-right:-5px"
					:popper-append-to-body="false"
					@change="
						queryData.gameName = ''
						queryData.gameId = undefined
					"
				>
					<el-option
						key="0"
						:value="0"
						:label="$t('game.game_manage.game_name')"
					></el-option>
					<el-option
						key="1"
						:value="1"
						:label="$t('game.game_manage.game_id')"
					></el-option>
				</el-select>
				<el-form-item v-if="!searchGameType" prop="gameName">
					<el-input
						v-input="{ name: 'symbols' }"
						v-model="queryData.gameName"
						clearable
						size="medium"
						style="width: 200px"
						:placeholder="$t('common.please_enter')"
						:disabled="loading"
					></el-input>
				</el-form-item>
				<el-form-item v-if="searchGameType" prop="gameId">
					<el-input-number
						v-input="{ name: 'num' }"
						v-model.trim="queryData.gameId"
						class="input-number-game"
						clearable
						size="medium"
						style="width: 200px;text-algin:left"
						:placeholder="$t('common.please_enter')"
						:disabled="loading"
						:controls="false"
						:precision="0"
					></el-input-number>
				</el-form-item>
				<el-form-item
					:label="$t('game.game_venue') + ':'"
					prop="venueCode"
				>
					<el-select
						v-model="queryData.venueCode"
						multiple
						collapse-tags
						clearable
						:placeholder="$t('common.all')"
						style="width:210px"
						:popper-append-to-body="false"
					>
						<el-option
							v-for="item in bwVenueList"
							:key="item.venueId"
							:label="item[getKey('venueName')]"
							:value="item.venueCode"
						></el-option>
					</el-select>
				</el-form-item>
				<el-form-item
					:label="$t('game.show_status') + ':'"
					prop="status"
				>
					<el-select
						v-model="queryData.status"
						collapse-tags
						multiple
						clearable
						:placeholder="$t('common.all')"
						style="width:210px"
						:popper-append-to-body="false"
					>
						<el-option
							v-for="item in statusList"
							:key="item.code"
							:label="item.description"
							:value="item.code"
						></el-option>
					</el-select>
				</el-form-item>
				<el-form-item
					:label="$t('game.game_manage.support_device') + ':'"
					prop="supportTerminal"
				>
					<el-select
						v-model="queryData.supportTerminal"
						clearable
						multiple
						:placeholder="$t('common.all')"
						style="width:210px"
						:popper-append-to-body="false"
					>
						<el-option
							v-for="item in supportTerminalList"
							:key="item.code"
							:label="item.description"
							:value="item.code"
						></el-option>
					</el-select>
				</el-form-item>
				<el-form-item
					:label="$t('game.game_manage.icon_status') + ':'"
					prop="iconStatus"
				>
					<el-select
						v-model="queryData.iconStatus"
						clearable
						collapse-tags
						multiple
						:placeholder="$t('common.all')"
						style="width:210px"
						:popper-append-to-body="false"
					>
						<el-option
							v-for="item in iconStatusList"
							:key="item.code"
							:label="item.description"
							:value="item.code"
						></el-option>
					</el-select>
				</el-form-item>
				<el-form-item style="margin-left: 30px">
					<el-button
						type="primary"
						icon="el-icon-search"
						:disabled="loading"
						:loading="loading"
						size="medium"
						@click="search"
					>
						{{ $t('common.search') }}
					</el-button>
					<el-button
						icon="el-icon-refresh-left"
						:disabled="loading"
						size="medium"
						@click="reset"
					>
						{{ $t('common.reset') }}
					</el-button>
					<el-button
						v-if="hasPermission('301024')"
						type="warning"
						size="medium"
						@click="add()"
					>
						{{ $t('common.add') }}
					</el-button>
				</el-form-item>
			</el-form>
		</div>
		<div class="content">
			<el-table
				v-loading="loading"
				element-loading-spinner="el-icon-loading"
				border
				size="mini"
				class="small-size-table"
				:data="tableData"
				style="width: 100%"
				:header-cell-style="getRowClass"
			>
				<el-table-column
					prop="gameId"
					align="center"
					:label="$t('game.game_manage.game_id')"
				></el-table-column>
				<el-table-column
					prop="venueCode"
					align="center"
					:label="$t('game.venue_name')"
				>
					<template slot-scope="scope">
						{{ getVenueName(scope.row.venueCode) }}
					</template>
				</el-table-column>
				<el-table-column
					prop="gameName"
					align="center"
					:label="$t('game.game_manage.game_name')"
				>
					<template slot-scope="scope">
						{{
							scope.row[
								getKey('gameName', { index: 2, zh: true })
							]
						}}
					</template>
				</el-table-column>
				<el-table-column
					prop="status"
					align="center"
					:width="getWidth(90)"
					:label="$t('game.show_status')"
				>
					<template slot-scope="scope">
						<el-tag v-show="scope.row.status === 0" type="danger">
							{{ $t('game.game_manage.disabled') }}
						</el-tag>
						<el-tag v-show="scope.row.status === 1" type="success">
							{{ $t('game.game_manage.turn_on') }}
						</el-tag>
						<el-tag v-show="scope.row.status === 2" type="warning">
							{{ $t('game.game_manage.maintain') }}
						</el-tag>
					</template>
				</el-table-column>
				<el-table-column
					prop="supportTerminals"
					align="center"
					show-overflow-tooltip
					:label="$t('game.game_manage.support_device')"
				>
					<template slot-scope="scope">
						{{
							scope.row.supportTerminalList
								.map((i) =>
									filterArrCode(i, supportTerminalList)
								)
								.join(',')
						}}
					</template>
				</el-table-column>
				<!-- 图标状态 -->
				<el-table-column
					prop="iconStatus"
					align="center"
					:label="$t('game.game_manage.icon_status')"
					:min-width="$i18n.locale === 'zh_CN' ? 80 : 120"
				>
					<template slot-scope="scope">
						<span v-show="scope.row.iconStatus === 1">
							{{ $t('game.game_manage.suggest') }}
						</span>
						<span v-show="scope.row.iconStatus === 2">
							{{ $t('game.game_manage.hot') }}
						</span>
						<span v-show="scope.row.iconStatus === 3">
							{{ $t('game.game_manage.new') }}
						</span>
						<span v-show="!scope.row.iconStatus">
							无
						</span>
					</template>
				</el-table-column>
				<!-- 游戏图标 -->
				<el-table-column
					align="center"
					:label="$t('game.game_manage.game_icon')"
					:min-width="$i18n.locale === 'zh_CN' ? 120 : 150"
				>
					<template slot-scope="scope">
						<el-link
							type="primary"
							@click="
								imageAddress = scope.row.iconUrl
								imageViewerVisible = true
							"
						>
							{{ $t('common.click_show') }}
						</el-link>
					</template>
				</el-table-column>
				<!-- 游戏描述 -->
				<el-table-column
					prop="description"
					align="center"
					:label="$t('game.game_manage.game_tips')"
				>
					<template slot-scope="scope">
						{{ scope.row.description || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					prop="remark"
					align="center"
					:label="$t('game.game_manage.remark_info')"
				>
					<template slot-scope="scope">
						{{ scope.row.remark || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					prop="createdBy"
					align="center"
					:label="$t('common.createBy')"
				></el-table-column>
				<el-table-column
					prop="createdAt"
					align="center"
					:label="$t('common.createAt')"
					width="150px"
				></el-table-column>
				<!-- <el-table-column
					prop="createdBy"
					align="center"
					:label="$t('common.createBy')"
					width="150px"
				></el-table-column> -->
				<el-table-column
					prop="updatedBy"
					align="center"
					:label="$t('common.last_updateBy')"
				></el-table-column>
				<el-table-column
					prop="updatedAt"
					align="center"
					width="150px"
					:label="$t('common.last_updateAt')"
				></el-table-column>
				<el-table-column
					prop="operation"
					align="center"
					:label="$t('common.actions')"
					width="240px"
				>
					<template slot-scope="scope">
						<span>
							<el-button
								v-if="
									hasPermission('301021') && scope.row.status
								"
								type="danger"
								@click="updateStatus(scope.row.gameId, 0)"
							>
								{{ $t('common.disabled') }}
							</el-button>
							<el-button
								v-if="
									hasPermission('301021') && !scope.row.status
								"
								type="success"
								@click="updateStatus(scope.row.gameId, 1)"
							>
								{{ $t('common.turn_on') }}
							</el-button>
						</span>
						<span>
							<el-button
								v-if="
									hasPermission('301022') &&
										scope.row.status !== 2
								"
								type="warning"
								@click="updateStatus(scope.row.gameId, 2)"
							>
								{{ $t('common.maintain') }}
							</el-button>
							<template>
								<el-button
									v-if="
										hasPermission('301022') &&
											scope.row.status === 2
									"
									type="success"
									@click="updateStatus(scope.row.gameId, 1)"
								>
									{{ $t('common.turn_on') }}
								</el-button>
							</template>
						</span>

						<el-button
							v-if="hasPermission('301023')"
							type="primary"
							:disabled="scope.row.status === 1"
							@click="edit(scope.row)"
						>
							{{ $t('common.edit') }}
						</el-button>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination
				:total="total"
				:current-page.sync="pageNum"
				class="pageValue"
				background
				layout="total, sizes,prev, pager, next, jumper"
				:page-size="pageSize"
				:page-sizes="pageSizes"
				:pager-count="9"
				@current-change="handleCurrentChange"
				@size-change="handleSizeChange"
			></el-pagination>
		</div>
		<el-dialog
			:title="rowData ? $t('common.edit') : $t('common.add')"
			:visible.sync="addVisible"
			width="1200px"
		>
			<el-form
				ref="addForm"
				label-width="auto"
				:model="addFormData"
				class="information"
				@submit.native.prevent
			>
				<el-row>
					<el-col :span="12">
						<el-form-item
							:label="
								$t('game.game_manage.game_insert_name') + ':'
							"
							prop="gameName"
							:rules="[
								{
									required: true,
									message: $t('game.game_manage.input_tips1'),
									trigger: 'blur'
								}
							]"
						>
							<el-input
								v-model.trim="addFormData.gameName"
								clearable
								size="medium"
								:maxlength="20"
								style="width: 280px"
								:placeholder="
									$t('game.game_manage.input_tips1')
								"
							></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item
							:label="$t('game.game_manage.access') + ':'"
							prop="accessInfo"
							:rules="[
								{
									required: true,
									message: $t('game.game_manage.input_tips5'),
									trigger: 'blur'
								}
							]"
						>
							<el-input
								v-model.trim="addFormData.accessInfo"
								clearable
								size="medium"
								:maxlength="100"
								style="width:280px"
								:placeholder="
									$t('game.game_manage.input_tips5')
								"
								:disabled="loading"
							></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="12">
						<el-form-item
							:label="
								`${$t('game.game_manage.client_show_name')}:`
							"
							prop="gameZhName"
							:rules="[
								{
									required: true,
									message: $t(
										'game.game_betslip.input_tips1_venueName'
									),
									trigger: 'blur'
								}
							]"
						>
							<el-input
								v-model.trim="addFormData.gameZhName"
								clearable
								size="medium"
								:maxlength="100"
								style="width:280px"
								:placeholder="$t('common.please_enter')"
								:disabled="loading"
							></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item
							:label="$t('game.game_manage.icon_status') + ':'"
							prop="iconStatus"
							:rules="[
								{
									required: true,
									message: $t('game.game_manage.input_tips2'),
									trigger: 'change'
								}
							]"
						>
							<el-select
								v-model="addFormData.iconStatus"
								clearable
								:placeholder="$t('common.please_choose')"
								style="width:280px"
								:popper-append-to-body="false"
							>
								<el-option
									v-for="item in iconStatusList"
									:key="item.code"
									:label="item.description"
									:value="item.code"
								></el-option>
							</el-select>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<!-- <el-col :span="12">
						<el-form-item
							:label="
								`${$t(
									'game.game_manage.client_show_name'
								)}(${$t('common.en')}):`
							"
							prop="gameEnName"
							:rules="[
								{
									required: true,
									message: $t(
										'game.game_betslip.input_tips1_venueEnName'
									),
									trigger: 'blur'
								}
							]"
						>
							<el-input
								v-model="addFormData.gameEnName"
								clearable
								size="medium"
								:maxlength="100"
								style="width:280px"
								:placeholder="$t('common.please_enter')"
								:disabled="loading"
								@keyup.enter.native="enterSearch"
							></el-input>
						</el-form-item>
					</el-col> -->
					<el-col :span="12">
						<el-form-item
							:label="$t('game.game_manage.remark_info') + ':'"
							prop="remark"
						>
							<el-input
								v-model="addFormData.remark"
								clearable
								size="medium"
								:maxlength="500"
								style="width:280px"
								:placeholder="
									$t('game.game_manage.input_tips4')
								"
								:disabled="loading"
							></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item
							:label="$t('game.game_manage.game_tips') + ':'"
							prop="description"
						>
							<el-input
								v-model="addFormData.description"
								clearable
								size="medium"
								:maxlength="11"
								style="width:280px"
								:placeholder="
									$t('game.game_manage.input_tips6')
								"
								:disabled="loading"
							></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<!-- <el-col :span="12">
						<el-form-item
							:label="
								`${$t(
									'game.game_manage.client_show_name'
								)}(${$t('common.th')}):`
							"
							prop="gameThName"
							:rules="[
								{
									required: true,
									message: $t(
										'game.game_betslip.input_tips1_venueThName'
									),
									trigger: 'blur'
								}
							]"
						>
							<el-input
								v-model="addFormData.gameThName"
								clearable
								size="medium"
								:maxlength="100"
								style="width:280px"
								:placeholder="$t('common.please_enter')"
								:disabled="loading"
								@keyup.enter.native="enterSearch"
							></el-input>
						</el-form-item>
					</el-col> -->
				</el-row>
				<el-row>
					<!-- <el-col :span="12">
						<el-form-item
							:label="
								`${$t(
									'game.game_manage.client_show_name'
								)}(${$t('common.vn')}):`
							"
							prop="gameVnName"
							:rules="[
								{
									required: true,
									message: $t(
										'game.game_betslip.input_tips1_venueVnName'
									),
									trigger: 'blur'
								}
							]"
						>
							<el-input
								v-model="addFormData.gameVnName"
								clearable
								size="medium"
								:maxlength="100"
								style="width:280px"
								:placeholder="$t('common.please_enter')"
								:disabled="loading"
								@keyup.enter.native="enterSearch"
							></el-input>
						</el-form-item>
					</el-col> -->
					<el-col :span="12">
						<el-form-item
							:label="$t('game.venue_name') + ':'"
							prop="venueCode"
							:rules="[
								{
									required: true,
									message: $t('game.game_manage.input_tips8'),
									trigger: 'change'
								}
							]"
						>
							<el-select
								v-model="addFormData.venueCode"
								clearable
								:placeholder="
									$t('game.game_manage.input_tips8')
								"
								style="width:280px"
								:popper-append-to-body="false"
								:disabled="!!rowData"
							>
								<el-option
									v-for="item in bwVenueList"
									:key="item.id"
									:label="item[getKey('venueName')]"
									:value="item.venueCode"
								></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item
							:label="$t('game.game_manage.support_device') + ':'"
							prop="supportTerminalList"
							:rules="[
								{
									required: true,
									message: $t('game.game_manage.input_tips3'),
									trigger: 'blur'
								}
							]"
						>
							<el-select
								v-model="addFormData.supportTerminalList"
								multiple
								clearable
								:placeholder="
									$t('game.game_manage.input_tips3')
								"
								style="width:350px"
								:popper-append-to-body="false"
							>
								<el-option
									v-for="item in supportTerminalList"
									:key="item.code"
									:label="item.description"
									:value="item.code"
								></el-option>
							</el-select>
						</el-form-item>
					</el-col>
				</el-row>
				<!-- 二期注释掉 -->
				<el-row>
					<el-col :span="12">
						<el-form-item
							:label="$t('game.game_manage.device_upload')"
							class="gameItem"
							prop="iconUrl"
							:rules="[
								{
									required: true,
									message: $t('game.please_upload_icon'),
									trigger: 'blur'
								}
							]"
						>
							<UploadItem
								ref="imgUpload"
								list-type="picture-card"
								:uploadAPI="uploadAPI"
								:upload-file-type="'image'"
								:platform="'PC'"
								:fileSize="fileSize"
								@upoladItemSucess="handleUploadSucess"
								@startUpoladItem="handleStartUpload"
								@deleteUpoladItem="handleDeleteUpload"
								@upoladItemDefeat="handleUploadDefeat"
							></UploadItem>
							<p style="color:red;line-height:1.5">
								{{ $t('operation.upload_tips1') }}png，jpg
								<br />
								{{ $t('operation.upload_tips3') }}5M
							</p>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="addVisible = false">
					{{ $t('common.cancel') }}
				</el-button>
				<el-button type="primary" @click="submit()">
					{{ $t('common.confirm') }}
				</el-button>
			</span>
		</el-dialog>
		<image-viewer
			:visible.sync="imageViewerVisible"
			:url-list="[imageAddress]"
		/>
	</div>
</template>

<script>
import list from '@/mixins/list'
import { routerNames } from '@/utils/consts'
import UploadItem from '@/components/UploadItem'
import {
	gameManageAdd,
	getGameList,
	setGameStatus,
	editGame,
	getVenueListWithoutPage
} from '@/api//game'
export default {
	name: routerNames.gameManage,
	components: {
		UploadItem
	},
	mixins: [list],
	data() {
		return {
			queryData: {
				gameName: '',
				venueCode: undefined,
				status: undefined,
				iconStatus: undefined,
				gameId: undefined
			},
			bwVenueList: [], // 场馆列表
			searchGameType: 0,
			addVisible: false,
			addFormData: {
				gameName: '',
				gameZhName: undefined,
				gameEnName: undefined,
				gameThName: undefined,
				gameVnName: undefined,
				venueCode: undefined,
				status: undefined,
				iconStatus: undefined,
				supportTerminalList: [],
				accessInfo: '',
				remark: '',
				description: '',
				iconUrl: ''
			},
			rowData: null,
			loading: false,
			tableData: [],
			imageViewerVisible: false,
			imageAddress: '',
			total: 0,
			changeStatusRemark: ''
		}
	},
	computed: {
		// 支持终端
		supportTerminalList() {
			return [
				{
					code: '1',
					description: 'PC'
				},
				{
					code: '2',
					description: 'IOS_APP'
				},

				{
					code: '3',
					description: 'IOS_H5'
				},
				{
					code: '4',
					description: 'Android_H5'
				},
				{
					code: '5',
					description: 'Android_APP'
				}
			]
		},
		// 图标状态
		iconStatusList() {
			return [
				{
					code: 1,
					description: this.$t('game.game_manage.suggest')
				},
				{
					code: 2,
					description: this.$t('game.game_manage.hot')
				},
				{
					code: 3,
					description: this.$t('game.game_manage.new')
				}
			]
		},
		// 显示状态
		statusList() {
			return [
				{
					code: '0',
					description: this.$t('common.status_disabled')
				},
				{
					code: '1',
					description: this.$t('common.status_turn_on')
				},
				{
					code: '2',
					description: this.$t('common.status_maintain')
				}
			]
		},
		// bwVenueList() {
		// 	return this.globalDics.bwVenueList || []
		// },
		fileSize() {
			return 5 * 1024 * 1024
		},
		uploadAPI() {
			return this.$api.imageUpload
		}
	},
	created() {
		this.getBwVenueList()
	},
	methods: {
		// 获取场馆列表
		getBwVenueList() {
			getVenueListWithoutPage().then((res) => {
				this.bwVenueList = res.data
			})
		},
		// 重置
		reset() {
			this.pageNum = 1
			this.searchGameType = 0
			this.$refs.searchForm.resetFields()
			this.loadData()
		},
		// 新增
		add() {
			this.addVisible = true
			this.rowData = null
			this.$refs.addForm?.resetFields()
			this.$refs.imgUpload?.clearFile?.()
		},
		// 查询数据
		loadData() {
			this.loading = true
			const params = {
				pageSize: this.pageSize,
				pageNum: this.pageNum,
				...this.queryData
			}
			for (const k in params) {
				if (params[k] === '' || params[k] === undefined) {
					delete params[k]
				}
			}
			getGameList(params)
				.then((res) => {
					this.loading = false
					this.tableData = res.data.record
					this.total = res.data.totalRecord
				})
				.finally(() => {
					this.loading = false
				})
		},
		// 获取场馆名称
		getVenueName(venueCode) {
			return (
				this.bwVenueList.find((i) => {
					return i.venueCode === venueCode
				})?.[this.getKey('venueName')] || '-'
			)
		},
		handleStartUpload() {
			this.$message.info(this.$t('common.upload_start'))
		},
		handleUploadSucess({ index, file, id }) {
			this.addFormData.iconUrl = file.imgUrl
		},
		handleUploadDefeat() {
			this.addFormData.iconUrl = ''
			this.$message.error(this.$t('common.upload_fail'))
		},
		handleDeleteUpload() {
			this.addFormData.iconUrl = ''
			this.$message.warning(this.$t('common.upload_del'))
		},

		// 新增/编辑提交
		submit() {
			this.$refs.addForm.validate((valid) => {
				if (valid) {
					const params = { ...this.addFormData }
					for (const k in params) {
						if (
							params[k] === undefined ||
							(Array.isArray(params[k]) && !params[k].length)
						) {
							delete params[k]
						}
					}

					if (this.rowData) {
						// 编辑
						editGame({
							...params,
							gameId: this.rowData.gameId
						}).then((res) => {
							if (res.code !== 200) {
								return this.$message.error(res.msg)
							}
							this.$message.success(
								this.$t('common.action_success')
							)
							this.addVisible = false
							this.loadData()
						})
					} else {
						// 新增
						gameManageAdd(params).then((res) => {
							if (res.code !== 200) {
								return this.$message.error(res.msg)
							}
							this.addVisible = false
							this.$message.success(
								this.$t('common.action_success')
							)
							this.loadData()
						})
					}
				}
			})
		},
		// 编辑
		edit(data) {
			this.rowData = data
			this.addVisible = true
			this.$nextTick(() => {
				for (const k in this.addFormData) {
					this.addFormData[k] = data[k]
				}
				this.addFormData.iconUrl = data.iconUrl
				if (this.addFormData.iconUrl) {
					this.$refs.imgUpload.state = 'image'
					this.$refs.imgUpload.fileUrl = this.addFormData.iconUrl
				}
				this.$refs.addForm.clearValidate()
			})
		},
		updateStatus(gameId, status) {
			const text =
				status === 0
					? this.$t('common.disabled')
					: status === 1
					? this.$t('common.turn_on')
					: this.$t('common.maintain')
			this.$confirm(
				`<strong>${this.$t('game.game_manage.is')}${text}${this.$t(
					'common.actions'
				)}</strong></br>
                 <span style='font-size:12px;color:#c1c1c1'>${this.$t(
						'operation.switch_status_tips2'
					)}</span>`,
				this.$t('common.success_tip'),
				{
					dangerouslyUseHTMLString: true,
					confirmButtonText: this.$t('common.confirm'),
					cancelButtonText: this.$t('common.cancel'),
					type: 'warning'
				}
			)
				.then(() => {
					setGameStatus({
						gameId,
						status
					}).then((res) => {
						if (res?.code === 200) {
							this.$message({
								message: this.$t('common.action_success'),
								type: 'success'
							})
						} else {
							this.$message({
								message: res?.msg || this.$t('common.error'),
								type: 'error'
							})
						}
						this.loadData()
					})
				})
				.catch(() => {})
		},
		filterArrCode(value, arr) {
			if (arr.length) {
				return arr.find((i) => i.code === value).description
			}
			return ''
		}
	}
}
</script>

<style lang="scss" scoped>
::v-deep .input-number-game {
	.el-input input {
		text-align: left;
	}
}
.information {
	margin: 5px 0;
	padding: 0 15px;
}
.gameItem {
	padding-left: 37px;
}
</style>
